
var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
// 设计稿750*1200
var hUnit = bodyWidth/750;
var mySwiper;
var loader = new resLoader({
	resources : [
		'img/loading.gif',
		'img/bg.jpg',
		'img/bg2.jpg',
		'img/bg3.jpg',
		'img/chartbg.png',
		'img/dietipbg.jpg',
		'img/face_1.png',
		'img/face_2.png',
		'img/face_3.png',
		'img/face_4.png',
		'img/face_5.png',
		'img/face_6.png',
		'img/face_7.png',
		'img/face_8.png',
		'img/face_10.png',
		'img/face_11.png',
		'img/face_12.png',
		'img/face_13.png',
		'img/face_14.png',
		'img/face_15.png',
		'img/face_16.png',
		'img/face_17.png',
		'img/face_18.png',
		'img/face_19.png',
		'img/face_20.png',
		'img/face_21.png',
		'img/face_22.png',
		'img/face_23.png',
		'img/face_24.png',
		'img/face_25.png',
		'img/face_26.png',
		'img/face_27.png',
		'img/face_28.png',
		'img/face_29.png',
		'img/face_30.png',
		'img/face_31.png',
		'img/face_32.png',
		'img/face_33.png',
		'img/face_34.png',
		'img/face_35.png',
		'img/face_36.png',
		'img/face_37.png',
		'img/face_38.png',
		'img/face_39.png',
		'img/face_40.png',
		'img/face_logo.png',
		'img/face1.jpg',
		'img/face1.jpg',
		'img/face2.jpg',
		'img/face3.jpg',
		'img/face4.jpg',
		'img/face5.jpg',
		'img/face6.jpg',
		'img/face7.jpg',
		'img/face8.jpg',
		'img/face9.jpg',
		'img/face10.jpg',
		'img/aishaihebiyalang.png',
		'img/banma.png',
		'img/banma1.jpg',
		'img/banma2.jpg',
		'img/changjinglu.png',
		'img/changjinglu.png',
		'img/changjinlu1.jpg',
		'img/changjinlu2.jpg',
		'img/chuanshanjia1.jpg',
		'img/chuanshanjia2.jpg',
		'img/daxiang1.jpg',
		'img/daxiang2.jpg',
		'img/face_img1.png',
		'img/face_img2.png',
		'img/face_logo.png',
		'img/face2_logo.png',
		'img/heixingxig.png',
		'img/heixingxig2.jpg',
		'img/lang1.jpg',
		'img/liebao1.jpg',
		'img/liebao2.jpg',
		'img/loading_bg.jpg',
		'img/over_face1.png',
		'img/over_face2.png',
		'img/over_face3.png',
		'img/over_face4.png',
		'img/over_face5.png',
		'img/over_face6.png',
		'img/over_face7.png',
		'img/over_face8.png',
		'img/over_face9.png',
		'img/over_face10.png',
		'img/over_text_left.png',
		'img/over_text_rigth.png',
		'img/shizi1.jpg',
		'img/shizi2.jpg',
		'img/xiniu1.jpg',
		'img/xiniu2.jpg',
		'img/xiniu2.jpg',
		'img/incon.png',
		'img/namebg.png',
		'img/over_face_21.png',
		'img/over_face3.png',
		'img/over_text_left.png',
		'img/over_text_rigth.png',
		'img/over_title_left.png',
		'img/over_title_right.png',
		'img/qrcode.jpg',
		'img/seccess.png',
		'img/shareTip.png',
		'img/titlebg.png',
		'img/wechat_bg_bottm.png',
		'img/wechat_bg_top.png'
	],
	onStart : function(total){
		console.log('start:'+total);
	},
	onProgress : function(current, total){
		//console.log(Math.ceil(current/total*100));
		//console.log(current+'/'+total);
		var percent = Math.ceil(current/total*100);
		if(percent>100){percent=100}
		$('.progress').empty().html(percent+'%');
		$('.percent').css('width',percent+'%');
	},
	onComplete : function(total){
		//console.log('加载完毕:'+total+'个资源');
		$("#loading").hide();
	}
});
loader.start();

var dataId = 0,//数据的id
	dieId = 0;
var chartSet = false;//图标设置状态
var timeFlag = false,//定时开关
	time_int = false,//定时器
	time = 0;//开始的时间
	tipTime = 10;//提示时间
var oSwiper,//遮盖层滑动
	iSwiper,//遮盖层第二屏滑动
	iSwiperState = false;//滑动初始化状态
//旋转舞台初始化
function rotationInit(){
	var html = '';
	var imgWidth = 200;
	for(i in animalData){
		var _html;
		var _tranZ = ( imgWidth/3.6) / Math.tan( ( 360/animalData.length/2 ) * Math.PI / 180 )
		_html = '<dd data-id="'+animalData[i].id+'" style="background-image: url('+animalData[i].faceImg+'); transform: rotateY('+i*36+'deg) translateZ('+_tranZ+'px);"><div class="item"><img class="seccessTip" src="./img/seccess.png"><img src="img/died.png" class="died" alt="" /></div></dd>';
		html+= _html;
	}
	slide1bgInit();
	//console.log(html);
	$("#stage").append(html);
	mySwiper = new Swiper ('#face-page', {
		direction: 'vertical',
		onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			swiperAnimateCache(swiper); //隐藏动画元素 
			swiperAnimate(swiper); //初始化完成开始动画
		},
		onSlideChangeEnd: function(swiper){ 
			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			if(swiper.activeIndex==1 ){
				swiper.lockSwipes();
				timeIit();
			}
		} 
	});
}
rotationInit();
//幻灯片背景初始化
function slide1bgInit(){
	var htmls = '';
	var animate_name = 'BgFedeDown',//动画名称
		animate_duration = 0.15,//动画执行时间
		animate_delay = 0.05;//动画延时时间
	for(var i = 0 ; i < 40; i++){
		var _html;
		var imgId = i+1;
		var className;
		var marginR0 = '';
		if(imgId%5==0){
			marginR0 = 'marginR0';
		}
		imgId<=5 ? className = imgId : className = i%5+1;
		_html = '<li class="column'+className+' '+marginR0+' ani" swiper-animate-effect="'+animate_name+'" swiper-animate-duration="'+animate_duration+'s" swiper-animate-delay="'+animate_delay*(40-i)+'s"><img src="./img/face_'+imgId+'.png" alt=""></li>';
		htmls += _html;
	}
	$(".slide-bg").append(htmls);
}

function timeIit(){
    timeFlag = true;
    time_int = window.setInterval(function(){
        if(!timeFlag)return;
        time ++;
        console.log('time',time);
		for(i in animalData){	
			var animalDataItem = animalData[i];
			var tipTime = animalDataItem.dieTime - time;
            if(tipTime <= 10){
		        $(".dieTip .time").html(tipTime);
		        $(".dieTip .savebtn").attr('data-saveId',i);
            	$(".dieTip .name").html(animalDataItem.name);
            	var saveState = $(".dieTip").attr('data-saveState');
            	if(saveState=='false'){
            		$(".dieTip").show();
            	}
            }
			if(time==animalData[i].dieTime){
	            $(".dieTip").hide();
	            var elemId =  $("#stage dd").eq(i);
	            if(!elemId.hasClass('seclected')){
	            	elemId.addClass('failed');
	            }
	            console.log(animalData[i].name+'消失');
				if(i==animalData.length-1){
	        		timeFlag=false;
	        		window.clearInterval(this.time_int);
	        		$(".dieTip").hide();
	        		$("#over-layer-timeOver").show();
	        		console.log("全部死亡！");
				}
			}
		}
    },1000);
}
function animalInfoUpdate(id){
	var dataItem = animalData[id];
	chartSet = false;
	$("#chart-area").attr('width',200);
	$("#chart-area").attr('height',200);
	$('#animal-info .name').html(dataItem.name);
	$('#animal-info .over_text').html(dataItem.over_text);
	$('#animal-info .title').html(dataItem.title);
	$('#animal-info .dieYear').html(dataItem.dieYear);
	$('#animal-info .headDescribe1').html(dataItem.headDescribe1);
	$('#animal-info .describeText').html(dataItem.describeText);
	$('#animal-info .wechatTitle').html(dataItem.wechatTitle);
	$('#animal-info .wechatDescribe').html(dataItem.wechatDescribe);
	$('#animal-info .over_faceImg').attr('src',dataItem.over_faceImg);
	$('#animal-info .describeImg').attr('src',dataItem.describeImg);
	$('#animal-info .wechatImg').attr('src',dataItem.wechatImg);
	$('#animal-info .wechatLink').attr('href',dataItem.wechatLink);
	$('#animal-info .describeTitle').html(dataItem.describeTitle);
	$('#animal-info .chartTitle').html(dataItem.chartTitle);
	$('#animal-info .unchartTitle').html(dataItem.chartTitle);
	//如果是嘿猩猩处理
	console.log('id', id)
	if(id==2 || id==4 || id==5 || id==6){
		$('#animal-info .describe-xinxin').show();
		$('#animal-info .describe').hide();
	}else{
		$('#animal-info .describe-xinxin').hide();
		$('#animal-info .describe').show();
	}

	//图标的判断
	if(!dataItem.chartState){
		$('.chart').hide();
		$('.unchartTitle').show();
	}else{
		$('.chart').show();
		$('.unchartTitle').hide();
	}
	$("#animal-info").show();

	console.log('id',id);
	if(!iSwiperState){
	    oSwiper = new Swiper('#animal-info',{
			direction : 'vertical',
			mousewheelControl: true,
			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				swiperAnimateCache(swiper); //隐藏动画元素 
				swiperAnimate(swiper); //初始化完成开始动画
			},
			onSetTransition: function(swiper){
	            if(swiper.activeIndex==1){
		            swiper.params.onlyExternal=true;
		            swiper.disableMousewheelControl();
	           	}else{
		            swiper.params.onlyExternal=false;
		            swiper.enableMousewheelControl();
		        }
	       	},
	        onSlideChangeEnd:function(swiper){
	        	swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	        	if(swiper.activeIndex==1 && !chartSet){
					dataItem = animalData[dataId];
					var ctx = $("#chart-area").get(0).getContext("2d");
					var options = {
						segmentShowStroke : false,
						//String - Animation easing effect
						animationEasing : "easeInOutQuad",
					}
					var chartPie = new Chart(ctx).Pie(dataItem.chartdata,options);
					chartSet = !chartSet;
					iSwiper = new Swiper('#animal-info-cont',{
						scrollbar: '.swiper-scrollbar',
				        direction: 'vertical',
				        slidesPerView: 'auto',
						freeMode: true,
						freeModeMomentum : false,
						mousewheelControl: true,
						mousewheelSensitivity : 0.5,
						onSetTransition: function(swiper,translate){
							//translate 一直为0，不可直接用
							nowTranslate=swiper.translate;
							if( typeof(beforeTranslate)=="undefined"){beforeTranslate=0};
							slideHeight=swiper.slides[0].scrollHeight;
							swiperHeight=swiper.height
							if(nowTranslate>-2 && nowTranslate > beforeTranslate){oSwiper.slideTo(0);}
							if(slideHeight-swiperHeight+nowTranslate<2 && nowTranslate < beforeTranslate){oSwiper.slideTo(2);}
							beforeTranslate=nowTranslate;
				        }
					});
	        	}
	        }
		})
		iSwiperState = !iSwiperState;
	}else{
		oSwiper.slideTo(0,0,true);
		$("#animal-info-cont .swiper-wrapper").css({transform: 'translate3d(0px, 0px, 0px)'});
	}
}

var startX = -20,
	startY = 0,
	startId = 0,
	circleNub = 0,
	roateDeg = 360/(animalData.length);
touch.on('#stage', 'touchstart', function(ev){
	ev.preventDefault();
});
//舞台旋转
function StageRoute(nowId){
	var routeDegY = -nowId*roateDeg;
	console.log('nowId',nowId);
	$('#stage')[0].style.transform = 'perspective('+2000*hUnit+'px) rotateX('+startX+'deg) rotateY('+routeDegY+'deg)';

	var dataId;
	var dataLenght = animalData.length-1;
	if(nowId >= 0){
		if(nowId > dataLenght){
			dataId = nowId%animalData.length;
			console.log('dataId',dataId);
		}else{
			dataId = nowId;
		}
	}else{
		if(nowId < -animalData.length){
			if(nowId%animalData.length==0){
				dataId = nowId%animalData.length;
			}else{
				dataId = animalData.length+nowId%animalData.length;
			}
			console.log('dataId',dataId,nowId%animalData.length);
		}else{
			dataId = animalData.length+nowId;
		}
	}
	console.log('dataId',dataId);
	var dataItem = animalData[dataId];
	
	$(".swiper-slide2 .name").html(dataItem.name);
	$(".swiper-slide2 .headDescribe2").html(dataItem.headDescribe2);
}

//舞台的旋转
touch.on('#stage', 'swipeleft', function(ev){
	console.log('swipeleft');
	startId++;
	StageRoute(startId);
	
});
//舞台的旋转
touch.on('#stage', 'swiperight', function(ev){
	console.log('swiperight');
	startId--;
	StageRoute(startId);
});

//舞台中图像的点击事件
$("#stage").on('tap','dd',function(){
	var index = $("#stage dd").index($(this));
	if(dieId==index){
		$(".dieTip").attr('data-saveState',true);
		$(".dieTip").hide();
	}
	console.log('index',index);
	if(!$(this).hasClass('failed')){
		$(this).addClass('seclected');
		dataId = $(this).attr('data-id');
		console.log('dataId',dataId);
		animalInfoUpdate(dataId);
	}
});
$(".dieTip .savebtn").click(function(){
	var saveId = $(this).attr('data-saveId');
	$("#stage dd").eq(saveId).addClass('seclected');
	$(".dieTip").attr('data-saveState',true);
	$(".dieTip").hide();
	console.log('saveId',saveId);
	animalInfoUpdate(saveId);
});
//动物信息遮盖中保护更多按钮事件
$("#animal-info").on('tap','.morebtn',function(){
	$("#animal-info").hide();
});
//分享按钮事件
$(".over-layer").on('tap','.sharebtn',function(){
	$("#over-layer-share").show();
});
//遮盖背景的事件
$(".over-layer").on('tap','.over-layer-bg',function(){
	$(this).parents('.over-layer').hide();
});

// 打开二维码页面
$("#openQrBtn").click(function(event) {
	/* Act on the event */
	$("#over-layer-qrcode").show();
});

